import React from 'react';
import { Input, Button, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Tooltip, Space, ConfigProvider, Drawer } from 'antd';
import { UpOutlined, DownOutlined } from '@ant-design/icons';
import "./ALheader.css"
import zhCN from 'antd/lib/locale/zh_CN';



const { RangePicker } = DatePicker;
const { Option } = Select;




class ALheader extends React.Component {
    constructor(props) {
        super(props)
        console.log(props);
        this.state = { show: false, icons: false }
        this.click = () => {
            this.setState({
                show: !this.state.show,
                icons: !this.state.icons
            })
        }
        this.onClose = () => {
            this.setState({
                show: !this.state.show,
                icons: !this.state.icons
            });
        };
    }
    getContainer = () => {
        return this.container;
    };
    saveContainer = container => {
        this.container = container;
    };
    render() {
        return (

            <div className='headrbox' >
                <ConfigProvider locale={zhCN}>
                    <div className='searchbar' ref={this.saveContainer} style={{ height: this.state.show ? '280px' : '' }} >
                        <Space>
                            <Input className='inputsize' placeholder="联系人、手机号码" ></Input>
                            <Button type='primary' >搜索</Button>
                            <Button type='primary' onClick={this.click}>

                                高级搜索
                                {
                                    this.state.icons ? <DownOutlined /> : <UpOutlined />
                                }


                            </Button>

                        </Space>
                    </div>

                    <Drawer
                        title="高级搜索"
                        placement="top"
                        closable={true}
                        size='default'
                        height={'280px'}
                        onClose={this.onClose}
                        visible={this.state.show}
                        getContainer={this.getContainer}
                        style={{ position: 'absolute' }}
                    >
                        <Row align='middle' justify='space-between'  >
                            <Col span={6} offset={2}> <Space>姓名  <Input /></Space> </Col>
                            <Col span={4}>
                                <Space>
                                    性别
                                    <Select placeholder="请选择">
                                        <Option key={1}>男</Option>
                                        <Option key={2}>女</Option>
                                    </Select>
                                </Space>
                            </Col>
                            <Col span={6}> <Space>手机号码 <Input /></Space> </Col>


                        </Row>
                        <Row justify='space-between' className='grid' >

                            <Col span={7} offset={2} >



                                <Space>
                                    生日
                                    <RangePicker style={{width:'250px'}} />
                                </Space>



                            </Col>


                            <Col span={7}  >
                                <Space>
                                    所在部门
                                    <Select placeholder="请选择" style={{width:'110px'}}>
                                        <Option key={1}>总经办</Option>
                                        <Option key={2}>财务部</Option>
                                        <Option key={3}>业务一部</Option>
                                        <Option key={4}>业务二部</Option>
                                        <Option key={5}>渠道招商部</Option>
                                        <Option key={6}>营销部</Option>
                                        <Option key={7}>采购部</Option>
                                        <Option key={8}>客服部</Option>
                                    </Select>
                                </Space>

                            </Col>

                            <Col span={8}>
                                <Space>
                                    是否离职
                                    <Select placeholder="请选择">
                                        <Option key={1}>在职</Option>
                                        <Option key={2}>离职</Option>
                                    </Select>
                                </Space>
                            </Col>


                        </Row>
                        <Row justify='center' >
                            <Space>
                            <Col>
                                <Button>立即搜索</Button>

                            </Col>
                            <Col>
                                <Button>清空条件</Button>
                            </Col>
                            </Space>

                        </Row>
                    </Drawer>


                </ConfigProvider>
            </div>
        )
    }

}

export default ALheader